<template>
  <el-dialog
    class="add_dialog"
    width="600px"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="90px"
    >
      <el-form-item
        label="轮播图:"
        prop="banner_img"
      >
        <!-- dialog-width="1000px"
          cropper-height="400px"
          :auto-crop-width="960"
          :auto-crop-height="215"
          :enlarge="2" -->
        <crop-upload
          accept=".jpg,.png"
          :init-val="form.banner_img"
          file-size="1M"
          wrapper-width="100%"
          wrapper-height="100px"
          :img-width="1920"
          :img-height="430"
          tip="图片格式JPG、PNG等格式，图片大小不可超过1M，"
          sub-tip="尺寸要求：宽度1920像素，高度430像素。"
          @setVal="(val)=>setUrl(val)"
        ></crop-upload>
      </el-form-item>
      <el-form-item label="链接类型:">
        <el-radio
          v-model="form.jump_type"
          :label="1"
        >商品</el-radio>
        <el-radio
          v-model="form.jump_type"
          :label="2"
        >页面</el-radio>
      </el-form-item>
      <el-form-item
        v-if="form.jump_type==2"
        label="页面外链:"
      >
        <el-input
          style="width:100%"
          v-model="form.link_url"
          placeholder="请输入带有http://或https://的网址链接"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="form.jump_type==1"
        label="产品链接:"
      >
        <div class="flex align-center justify-between link_wrapper">
          <p class="flex-1 text-ellipsis">{{urlName}}</p>
          <el-link
            type="primary"
            :underline="false"
            @click.native="openSelect"
          >{{form.banner_url&&urlName?"更改":"添加链接"}}</el-link>
        </div>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
    <goods-dialog
      ref="goodsDialog"
      :show-cate="false"
      :append-to-body="true"
      :show-checked-tool="true"
      @setSelect="setSelect"
    ></goods-dialog>
  </el-dialog>
</template>

<script>
import goodsDialog from "@/components/goodsDialog";
import { addBanner, getBannerById } from "@/api/recommend";
import cropUpload from "@/components/cropUpload";
export default {
  components: { goodsDialog, cropUpload },
  props: ["editId"],
  data() {
    return {
      dialogVisible: false,
      urlName: "",
      form: {
        banner_img: "",
        banner_url: "",
        jump_type: 1,
        link_url: ""
      },
      rules: {
        banner_img: [
          { required: true, message: '请上传轮播图', trigger: 'change' }
        ],
      },
    }
  },
  methods: {
    setUrl(val) {
      this.form.banner_img = val;
    },
    // 提交
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.jump_type == 2) {
            this.form.banner_url = this.form.link_url;
          }
          console.log(this.form);
          addBanner({
            banner_type: 3,
            ...this.form
          }).then(res => {
            this.dialogVisible = false;
            this.$emit("getList");
          })
        } else {
          this.$message({
            message: "请检查表单错误",
            type: "error"
          });
          return false;
        }
      });
    },
    // 设置选中的商品
    setSelect(goodsList) {
      const obj = goodsList[0];
      this.form.banner_url = obj.goods_id;
      this.urlName = obj.title;
    },
    // 打开商品选择对话框
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true;
      this.$refs.goodsDialog.selectItems = this.form.banner_url ? [{ goods_id: this.form.banner_url, title: this.urlName }] : [];
    },
    reset() {
      this.urlName = "";
      this.form = {
        banner_img: "",
        banner_url: "",
        jump_type: 1,
        link_url: ""
      };
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
      })
    },
    // 获取轮播图数据
    getData() {
      getBannerById(this.editId).then(res => {
        this.form.banner_id = res.id;
        this.form.jump_type = res.jump_type;
        this.form.banner_img = res.banner_img;
        if (this.form.jump_type == 1) {
          this.form.banner_url = res.banner_url;
          this.form.link_url = "";
        } else {
          this.form.link_url = res.banner_url;
          this.form.banner_url = "";
        }
        this.urlName = res.goods_name;
      })
    }
  },
  computed: {
    dialogTitle() {
      return this.editId ? "编辑轮播图" : "添加轮播图";
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.reset();
        if (this.editId) {
          this.getData();
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.link_wrapper {
  height: 40px;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  & > p {
    padding: 0 10px;
  }
  .el-link {
    margin: 0 10px;
  }
}
.img-uploader-img {
  height: 100px;
}
</style>
